<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="css/cssReset.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			p {
				width: 7.5rem;
				height: 1rem;
				line-height: 1;
				border: 1px solid red;
				box-sizing: border-box;
				font-size: 0.8rem;
			}
		</style>
	</head>

	<body>
		<p>这是一段文字</p>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		//window.screen.lockOrientation(["portrait-primary","portrait-secondary"]);
		//		window.screen.orientation.lock(["portrait-primary","portrait-secondary"]);
		//		window.screen.lockOrientation = screen.lockOrientation ||screen.mozLockOrientation || screen.msLockOrientation;
		function orient() {
			if(window.orientation == 90 || window.orientation == -90) {//横屏
				//ipad、iphone竖屏；Andriod横屏
				//$("body").attr("class", "landscape");
				//orientation = 'landscape';
				//alert("ipad、iphone竖屏；Andriod横屏");
				$("p").text("横屏");
				return false;
			} else if(window.orientation == 0 || window.orientation == 180) {//竖屏
				//ipad、iphone横屏；Andriod竖屏
//				$("body").attr("class", "portrait");
//				orientation = 'portrait';
				//alert("ipad、iphone横屏；Andriod竖屏");
				$("p").text("竖屏");
				return false;
			}
		}
		//页面加载时调用
		$(function() {
			orient();
		});
		//用户变化屏幕方向时调用
		$(window).on('orientationchange', function(e) {
			
			orient();
			
		});

	</script>

</html>